<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- <title>案例文件下载</title> -->
</head>

<body>
    <div class="content" id="app">
        <div class="header">
            <!-- <span> 《 </span> -->
            <span>案例文件下载</span>
        </div>

        <!-- <div id="noApplicationRecord"></div> -->
        <div class="content_div" v-for="item in data" :key="item.fileUrl">
            <div class="content_img">
                <img src="../imgs/xx.png" alt="">
            </div>
            <div class="content_c">
                <div>
                    <div class="content_fileName">{{item.fileName === null?"暂无名称":item.fileName}}</div>
                    <!-- <div>259kb</div> -->
                </div>
                <div><a target="_blank" :href="base_url+'/cpcp/api/downloadSftp?filePath='+item.filePath+'&fileName='+item.fileName" href="javascript:void(0);">下载</a></div>
            </div>
            
        </div>
        
    </div>
</body>
<script>
    // var noApplicationRecord = document.getElementById('noApplicationRecord')
    //模拟数据
    // var data = [
    //     {
    //         "fileName": null,
    //         "fileUrl": "http://134.64.251.212:8084/cpcp/api/downloadPic1/test.docx"
    //     },
    //     {
    //         "fileName": "a2.txt",
    //         "fileUrl": "http://134.64.251.212:8084/cpcp/api/downloadPic2/test.docx"
    //     },
    //     {
    //         "fileName": "a3.txt",
    //         "fileUrl": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
    //     }

    // ]
    // //绘制单个div
    // function setDiv(item) {
    //     var div = '<div class="content_div"><div class="content_img" >'
    //         + '<img src="../imgs/xx.png" alt="" id="div_img">'
    //         + '</div><div class="content_c">'
    //         + '</div>'
    //         + item.fileName + "<br/>"
    //         // + item.fileUrl
    //         + '<a href=' + item.fileUrl + '>下载</a>'
    //         // + '<a href=' + item.fileUrl + "onclick=" + downLoad(item) + '>下载</a>'
    //         + '<button onclick=' + downLoad(item) + '>下载</button>'
    //         + '</div>'
    //     return div
    // }
    // //循环加载到页面
    // function getnoApplicationData() {
    //     var html = ''
    //     for (var i = 0; i < data.length; i++) {
    //         html += setDiv(data[i])
    //     }
    //     noApplicationRecord.innerHTML = html
    // }

    // // window.onload = getnoApplicationData()
    // function downLoad(fileUrl) {
    //     console.log('22');
    //     console.log(fileUrl);
    // }
    let vm = new Vue({
        el: '#app',
        data: function () {
            return {
                list: [],
                base_url: 'http://134.64.251.212:8084',
                data: [
                    {
                        "fileName": null,
                        "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
                    },
                    {
                        "fileName": "a2.txt",
                        "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
                    },
                    {
                        "fileName": "a3.txt",
                        "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
                    }

                ]
            }
        },
        created() {
            // this.getData()

        },
        methods: {
            getData() {

                let url = "http://192.168.1.105:8501/cpcp/cpcpjsoncontent/getFile" + `/${10}`
                let params = new URLSearchParams();
                axios.get(url).then(e => {
                    console.log(e.data.data.fileIds);
                    this.list = (JSON.parse(e.data.data.fileIds))
                    console.log("_this.list", this.list);
                    // this.getnoApplicationData()
                }).catch(error => { });
                // this.getnoApplicationData()
            },
            // //绘制单个div
            // setDiv(item) {
            //     var div = '<div class="content_div"><div class="content_img" >'
            //         + '<img src="../imgs/xx.png" alt="" id="div_img">'
            //         + '</div><div class="content_c">'
            //         + '</div>'
            //         + item.fileName + "<br/>"
            //         // + item.fileUrl
            //         + '<a href=' + item.fileUrl + '>下载</a>'
            //         // + '<a href=' + item.fileUrl + "onclick=" + downLoad(item) + '>下载</a>'
            //         // +'<button onclick=' + downLoad(item) + '>下载</button>'
            //         + '</div>'
            //     return div
            // },
            // //循环加载到页面
            // getnoApplicationData() {
            //     console.log("22222");
            //     console.log("3333", this.data);

            //     var html = ''
            //     // for (const iterator of this.list) {
            //     //     console.log("iterator", iterator);
            //     //     html += this.setDiv(iterator)
            //     // }
            //     for (var i = 0; i++; i < this.data.length) {
            //         console.log("42353");
            //         html += setDiv(this.data[i])
            //     }
            //     noApplicationRecord.innerHTML = html
            // },
            // downLoad(item) {
            //     console.log(item);
            // }
            handleAddQuest(item) {
                console.log(item);
                let url = "http://192.168.1.105:8501/cpcp/api/downloadSftp" + `/filePath=${item.filePath}&fileName=${item.fileName}`
                let params = new URLSearchParams();
                axios.get(url).then(e => {
                    console.log(e);
                }).catch(error => { });

            }
        },
    })
</script>

<style>
    .header {
        width: 100%;
        line-height: 50px;
        background-color: rgb(6, 166, 250);
        text-align: center;
    }

    .header span {
        color: white;
    }

    .content {
        /* margin-left: 50px; */
        /* border-bottom: 1px solid rgb(226, 218, 218); */
        padding-bottom: 2px;
        width: 100%;

    }

    .content_div {
        margin-left: 20px;
        margin-top: 17px;
        position: relative;
        padding-top: 5px;
        display: flex;
        align-items: center;
    }

    .content_div::after {
        content: '';
        position: absolute;
        left: -31px;
        bottom: -14px;
        right: 0;
        /* left: 20px; */
        width: 387px;
        height: 1PX;
        background-color: #dcdcdc;
    }

    .content_div .content_img {
        width: 50px;
        height: 50px;
        display: inline-block;
        vertical-align: auto;
        vertical-align: middle
    }

    .content_div .content_img img {
        width: 100%;
        height: 100%;
        vertical-align: middle
    }

    .content_div .content_c {
        margin-left: 30px;
        display: flex;
        /* display: inline-block; */
    }

    .content_div .content_c .content_fileName {
        width: 150px;
        text-overflow: ellipsis;
        /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
        white-space: nowrap;
        /*让文字不换行*/
        overflow: hidden;
        /*超出要隐藏*/
    }

    .content_div .content_c div {
        padding-bottom: 4px;
    }

    a {
        margin-left: 20px;
        margin-top: 15px;
        text-decoration: none;
    }
</style>

</html>